<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/china.js"></script>
    <script type="text/javascript" src="../static/js/map.js"></script>
    <script type="text/javascript" src="../static/js/js.js"></script>
    <script type="text/javascript" src="../static/js/Bubble.js"></script>
    <link rel="stylesheet" href="../static/css/style.css">
    <script>
        var month_data = {{ month_data|tojson }};   // tojson(month_data)
        var compare_data = {{ compare_data|tojson }};
        var age_data = {{ age_data|tojson }};
        var educate_data = {{ educate_data|tojson }};
        var view_count_data = {{ view_count_data|tojson }};
        var visitor_count_data = {{ visitor_count_data|tojson }};
        var per_day_deal_amount = {{ per_day_deal_amount|tojson }};
        var additional_deal_data = {{ additional_deal_data|tojson }};
        var map_data = {{ map_data|tojson }};
    </script>
</head>
<body>
	<div class="head clearfix">
	<h1 class="pulll_left">大熊教育科技大数据分析平台</h1>
		<div class="menu menu2 pulll_left">
		<ul>
			<li><a href="#">6月份销售数据大屏展示</a></li>
		</ul>
		</div>

		<div class="time" id="showTime">2018/6/12 17:00:12</div>
		<script>
			var t = null;
			t = setTimeout(time,1000);//開始运行
			function time()
			{
			   clearTimeout(t);//清除定时器
			   dt = new Date();
				var y=dt.getFullYear();
				var mt=dt.getMonth()+1;
				var day=dt.getDate();
			   var h=dt.getHours();//获取时
			   var m=dt.getMinutes();//获取分
			   var s=dt.getSeconds();//获取秒
			   document.getElementById("showTime").innerHTML = y+"/"+mt+"/"+day+" "+h+":"+m+":"+s+"";
			   t = setTimeout(time,1000); //设定定时器，循环运行
			}
		</script>
	</div>
	<div class="mainbox">
		<!--顶部栏位-->
		<ul class="clearfix nav1">
			<!-- 完成目标预览 -->
			<li style="width: 25%">
				<div class="box">
					<div class="tit">月完成目标总览</div>
					<div class="boxnav" style="height: 200px;">
						<table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
						  <tbody>
							<tr>
							  <th>图书名称</th>
							  <th>计划完成</th>
							  <th>实际完成</th>
							  <th>完成率</th>
							</tr>
							{% for book in deal_amount %}

							<tr>
								<td>{{ book.name }}</td>
								<td><span class="text-w">{{ book.target }}</span></td>
								<td><span class="text-b">{{ book.total }}</span></td>
								<td>
									<div class="text-d">
                                        {% if book.total >= book.target %}
                                            100%
                                        {% else %}
                                            {{  "%.2f" | format(book.total / book.target *100) }}%
                                        {% endif %}
									</div>
								</td>
							</tr>
						  {% endfor %}


						  </tbody>
						</table>
					</div>
				</div>
				<div class="box">
				<div class="tit">月总销量分析</div>
					<div class="boxnav" style="height: 250px;">
						<div class="boxnav" style="height: 230px;" id="echarts1"></div>
					</div>
				</div>
			</li>
			<!-- 地图 -->
			<li style="width: 50%">
				<div class="box">
					<div class="boxnav mapc" style="height: 550px; position: relative">
						<div class="mapnav">
						<ul>
							<li><div><span>总成交额</span><p>{{ composite_data.deal_amount }}</p></div></li>
							<li><div><span>总成交量</span><p>{{ composite_data.deal_number }}</p></div></li>
							<li><div><span>总加购人数</span><p>{{ composite_data.additional_deal_number }}</p></div></li>
							<li><div><span>总访问人数</span><p>{{ composite_data.visitor_count }}</p></div></li>
							<li><div><span>总浏览量</span><p>{{ composite_data.views_count }}</p></div></li>
						</ul>
						</div>
					<div class="map" id="map"></div>
						<script>
						$(".mapbtn a").hover(function(){
							var ind=$(this).index()
							$(".mapnav ul").eq(ind).show().siblings().hide()
						})
						</script>
					</div>
				</div>
			</li>
			<!-- 地图 -->
			<li style="width: 25%">
				<div class="box">
					<div class="tit">月销量对比分析</div>
					<div class="boxnav" id="echarts2" style="height: 200px;">
					</div>
				</div>
				<div class="box">
					<div class="tit">访客属性分析</div>
					<div class="boxnav" style="height: 250px;">
						<div style="float: left; width: 50%; height: 200px" id="echarts3"></div>
						<div style="float: left; width: 50%; height: 200px"  id="echarts4"></div>
					</div>
				</div>

			</li>
		</ul>
		<!--底部栏位-->
		<div class="box" style="padding: 20px 0;">

			<ul class="clearfix nav2 ">
				<li style="width:25%"><div class="tit01">商品浏览量和访客数分析</div>
					<div class="" id="">
					<div style="float: left; width: 50%; height: 170px" id="echarts5"></div>
					<div style="float: left; width: 50%; height: 170px"  id="echarts6"></div>
					</div>
					<div class="leidanav leidanav2">
						<ul class="clearfix">
							<li style="width: 50%;"><span>总浏览量</span><p>157788</p></li>
							<li style="width: 50%;"><span>总访客数</span><p>75570</p></li>
						</ul>
					</div>
					</li>

					<li style="width:50%"><div class="tit01">商品销量分析</div>
						<div class="ftechart" id="echarts7"></div>
					</li>

				<li style="width:25%"><div class="tit01">商品加购分析</div>
					<div style="float: left; width: 100%;  min-height:250px" id="echarts8"></div>
					</li>
			</ul>
		</div>
	</div>
</body>
</html>